<template>
  <div class="container">
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col :span="24">
            <div class="chart-card">
              <div class="chart-header">
                <h3 class="chart-title">书籍各分类数量</h3>
                <el-tag type="primary">实时数据</el-tag>
              </div>
              <div style="width: 100%; height: 400px" id="boxa"></div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="chart-card">
              <div class="chart-header">
                <h3 class="chart-title">图书价格区间分布</h3>
                <el-tag type="success">库存分析</el-tag>
              </div>
              <div style="width: 100%; height: 400px" id="boxb"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="12">
        <el-row>
          <el-col :span="24">
            <div class="chart-card">
              <div class="chart-header">
                <h3 class="chart-title">畅销图书TOP10</h3>
                <el-tag type="warning">热销榜单</el-tag>
              </div>
              <div style="width: 100%; height: 400px" id="boxc"></div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="chart-card">
              <div class="chart-header">
                <h3 class="chart-title">月销售额</h3>
                <el-tag type="danger">财务数据</el-tag>
              </div>
              <div style="width: 100%; height: 400px" id="boxd"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from "vue";
import api from '../api';

// 图表配置
const optionA = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['加载中...'],
    axisLabel: {
      interval: 0,
      rotate: 30
    }
  },
  yAxis: {
    type: 'value',
    name: '数量（本）'
  },
  series: [{
    name: '数量',
    type: 'bar',
    data: [0],
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#5470c6' },
        { offset: 1, color: '#83a6ed' }
      ])
    },
    label: {
      show: true,
      position: 'top',
      formatter: '{c}本'
    }
  }]
});

const optionB = ref({
  tooltip: {
    trigger: 'axis',
    formatter: '{b}: {c}本'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['加载中...'],
    axisLabel: {
      interval: 0
    }
  },
  yAxis: {
    type: 'value',
    name: '数量（本）'
  },
  series: [{
    name: '图书数量',
    type: 'bar',
    data: [0],
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#91cc75' },
        { offset: 1, color: '#b6e4a1' }
      ])
    },
    label: {
      show: true,
      position: 'top',
      formatter: '{c}本'
    }
  }]
});

const optionC = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['加载中...'],
    axisLabel: {
      interval: 0,
      rotate: 30
    }
  },
  yAxis: {
    type: 'value',
    name: '销量（本）'
  },
  series: [{
    name: '数量',
    type: 'bar',
    data: [0],
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#fac858' },
        { offset: 1, color: '#fadc90' }
      ])
    },
    label: {
      show: true,
      position: 'top',
      formatter: '{c}本'
    }
  }]
});

const optionD = ref({
  tooltip: {
    trigger: 'axis',
    valueFormatter: value => '¥' + value.toLocaleString()
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['加载中...']
  },
  yAxis: {
    type: 'value',
    name: '销售额（元）',
    axisLabel: {
      formatter: '¥{value}'
    }
  },
  series: [{
    name: '销售额',
    type: 'line',
    data: [0],
    smooth: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: {
      width: 3,
      color: '#ee6666'
    },
    itemStyle: {
      color: '#ee6666'
    },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(238, 102, 102, 0.5)' },
        { offset: 1, color: 'rgba(238, 102, 102, 0.1)' }
      ])
    },
    label: {
      show: true,
      position: 'top',
      formatter: '¥{c}'
    }
  }]
});

// 图表初始化函数
async function initA() {
  try {
    const result = await api.getChartsA();
    optionA.value.xAxis.data = result.clsname;
    optionA.value.series[0].data = result.qty;

    const chartDom = document.getElementById('boxa');
    const chartA = echarts.init(chartDom);
    chartA.setOption(optionA.value);

    // 添加响应式调整
    window.addEventListener('resize', () => chartA.resize());
  } catch (error) {
    console.error('初始化图表A失败:', error);
  }
}

async function initB() {
  try {
    const result = await api.getChartsB();
    optionB.value.xAxis.data = result.price_range;
    optionB.value.series[0].data = result.book_count;

    const chartDom = document.getElementById('boxb');
    const chartB = echarts.init(chartDom);
    chartB.setOption(optionB.value);

    window.addEventListener('resize', () => chartB.resize());
  } catch (error) {
    console.error('初始化图表B失败:', error);
  }
}

async function initC() {
  try {
    const result = await api.getChartsC();
    optionC.value.xAxis.data = result.title;
    optionC.value.series[0].data = result.total_quantity;

    const chartDom = document.getElementById('boxc');
    const chartC = echarts.init(chartDom);
    chartC.setOption(optionC.value);

    window.addEventListener('resize', () => chartC.resize());
  } catch (error) {
    console.error('初始化图表C失败:', error);
  }
}

async function initD() {
  try {
    const result = await api.getChartsD();
    optionD.value.xAxis.data = result.month;
    optionD.value.series[0].data = result.total_sales;

    const chartDom = document.getElementById('boxd');
    const chartD = echarts.init(chartDom);
    chartD.setOption(optionD.value);

    window.addEventListener('resize', () => chartD.resize());
  } catch (error) {
    console.error('初始化图表D失败:', error);
  }
}

// 在onMounted中初始化所有图表
onMounted(() => {
  initA();
  initB();
  initC();
  initD();
});
</script>

<style scoped>
.container {
  min-height: 100%;
  background-color: #f8fafc;
  padding: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  padding: 20px;
  height: 100%;
  transition: all 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a3a5f;
}

.el-col .el-col {
  margin-bottom: 20px;
}
</style>